<template>
  <div v-if="!browserPasses || errorPrompt" class="alert alert-danger">
    <button
      class="close"
      data-dismiss="alert"
      aria-label="close"
      v-on:click="toggleAlert()"
    >
      &times;
    </button>
    <strong>Warning</strong>
    <p v-if="!browserPasses">
      This browser does not work here. You might need to try a modern browser.
    </p>
    <p v-if="errorPrompt">{{ errorPrompt }}</p>
    <p v-if="errorPrompt">
      <a :href="loginHref">Click here to try logging in again.</a>
    </p>
  </div>
</template>

<script>
//TODO: This can keep track of the state to prompt the user of
//      whatever. Also need to put errorPrompt from Appointments.vue
//      into the store.js and then reference here.

import { mapGetters } from "vuex";

export default {
  name: "AlertBlock",
  props: ["errorPrompt"],
  computed: {
    ...mapGetters(["api"]),
    browserPasses: function() {
      return "fetch" in window;
    },
    loginHref: function() {
      return this.api.login;
    }
  },
  methods: {
    toggleAlert: function() {
      this.errorPrompt = "";
    }
  }
};
</script>

<style scoped></style>
